<template>
  <div class="index-mqtt" ref="indexMqtt"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "index-mqtt",
  props: ["indexmqtt"],
  data() {
    return {
      count:[],
      max:[]
    };
  },
  watch: {
    indexmqtt(newValue, oldValue) {
      // console.log(this.indexmqtt);
      let a=this.indexmqtt;
      this.count=[
        a['connections.count'],
        a['sessions.count'],
        a['topics.count'],
        a['subscribers.count'],
        a['routes.count'],
        a['retained.count'],
      ];
      this.max=[
        a['connections.max'],
        a['sessions.max'],
        a['topics.max'],
        a['subscribers.max'],
        a['routes.max'],
        a['retained.max']
      ];
      this.drawImgTwo();
      immediate: true; //打开组件立即侦听 ******
    }
  },
  methods: {
    // Mqtt状态数据
    drawImgTwo() {
      let myChart = echarts.init(this.$refs.indexMqtt);
      let options = {
        title: {
          text: "Mqtt状态数据"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: "category",
          data: [
            "连接数量",
            "会话数量",
            "主题数量",
            "订阅数量",
            "路由数量",
            "保留消息",
          ]
        },
        series: [
          {
            name: "当前数量",
            type: "bar",
            data: this.count
          },
          {
            name: "历史最大数",
            type: "bar",
            data: this.max
          }
        ]
      };
      myChart.setOption(options);
    }
  },
};
</script>

<style lang="less" scoped>
.index-mqtt {
  width: 100%;
  height: 100%;
}
</style>
